import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
// 官方文档：https://vuex.vuejs.org/zh/index.html
// 对于ts支持的文档，内部有类型声明的支持
// 官方文档：https://vuex.vuejs.org/zh/guide/typescript-support.html
// 声明了namespace，所以可以把自己的整体当做一个文件导出来
// 因为单独看的话，它所有的部分state mutation action都是单独声明导出的
// 参考vue官网的时候，一定要参考的是关于ts支持的那一部分，否则容易出错
import menu, { MenuState } from './modules/menu'
import tabs, { TabsState } from './modules/tabs'
import user, { UserState } from './modules/user'
import { ITab } from './type/Index'
import { CommonStore } from './help'
/**
 * vue3中所有的模块需要自己导入，没有统一的模板使用
 * 需要自己一个一个的导入，这里的vuex也是
 */

// 各个不同组件的状态类型声明
// 这个写法是一种固定的规范
export type RootState = {
  tabs: TabsState
  menu: MenuState
  user: UserState
}
// 导入所有的模块
export const modules = {
  tabs: tabs,
  menu: menu,
  user: user
}
// 这个key和上面的InjectionKey都是从vue中导入的固定模块,可以参考如下介绍
// 本质上这个操作是为了简化自己的引入操作，这个操作是个重复的过程，可以简化
// https://vuex.vuejs.org/zh/guide/typescript-support.html#%E7%AE%80%E5%8C%96-usestore-%E7%94%A8%E6%B3%95
export const key: InjectionKey<Store<RootState>> = Symbol()

export const store = createStore<RootState>({
  modules
}) as CommonStore

// 定义自己的 useStore 组合式函数，这个定义好之后，所有的引入都引入这个
// 这个是为了让store可以有类型提示等信息，vue3中结合js如何使用，后面看有机会可以自己测试一下
export function useStore () {
  return baseUseStore(key) as CommonStore
}

// 总结：目前使用的这个ts文件是加入了对namespace的支持，如果没有namespace，使用前一个版本
